<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5nsRNxMg12lbqLsGyHXmFd8q"></script>
    <script type="text/javascript" src="js/Heatmap_min.js"></script>
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <title>郑州疫情热力图</title>
    <style type="text/css">
		ul,li{list-style: none;margin:0;padding:0;float:left;}
		html{height:100%}
		body{height:100%;margin:0px;padding:0px;font-family:"微软雅黑";}
		#container{height:100%;width:100%;}
		#r-result{width:100%;}
    </style>	
</head>
<body>
	<div id="container"></div>
</body>
</html>
<script type="text/javascript" scr="js/Map.js" ></script>
<script type="text/javascript">
    var map = new BMap.Map("container");          // 创建地图实例

    window.map = map;

    var point = new BMap.Point(113.6518, 34.752792);
    map.centerAndZoom(point, 13);             // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(); // 允许滚轮缩放
    $.ajax({
        // url : "data/zhengzhou_2_9.json",
        url : "data/china_2_10.json",
        success : function(data){
            // var points = JSON.parse(data);
            var points = data;
            if(!isSupportCanvas()){
                alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
            }
            // heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":50});
            // map.addOverlay(heatmapOverlay);
            // heatmapOverlay.setDataSet({data:points, max:50});
            for(var i = 0; i < points.length; i++){
                var mrkCurPt = new BMap.Marker(new BMap.Point(points[i].lng, points[i].lat));
                // mrkCurPt.setTitle(points[i].community);
                // var infowin = MapInfoWindowFactory.createPtWin('位置 : &nbsp;' + points[i].address + ' <br />数量 : &nbsp;' + points[i].count);
                // addPtCilckHandle(infowin, mrkCurPt);
                map.addOverlay(mrkCurPt);
            }

            // openHeatmap();
            //定位坐标点
            window.icnLocateIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
                offset: new BMap.Size(10, 25),
                imageOffset: new BMap.Size(0, 0 - 10 * 25)
            });

            window.marker = new BMap.Marker(new BMap.Point(118, 32), {icon: window.icnLocateIcon});
            window.setPoint = function (pt) {
                map.removeOverlay(window.marker);
                marker = new BMap.Marker(pt, {icon: window.icnLocateIcon});
                map.addOverlay(marker);
                marker.setAnimation(BMAP_ANIMATION_BOUNCE);
                setTimeout(function () {
                    marker.setAnimation(null);
                }, 1000);
            };
            //添加控件
            var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});// 左上角，添加比例尺
            var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
            var geolocationControl = new BMap.GeolocationControl();
            var mapTypeControl = new BMap.MapTypeControl({type : BMAP_MAPTYPE_CONTROL_MAP, mapTypes : [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP], anchor: BMAP_ANCHOR_TOP_LEFT});

            geolocationControl.addEventListener("locationSuccess", function(e){
                // 定位成功事件
                var address = '';
                address += e.addressComponent.province;
                address += e.addressComponent.city;
                address += e.addressComponent.district;
                address += e.addressComponent.street;

                window.setPoint(e.point);
            });
            geolocationControl.addEventListener("locationError",function(e){
                // 定位失败事件
                alert(e.message);
            });

            map.addControl(top_left_control);
            map.addControl(top_left_navigation);
            map.addControl(geolocationControl);
            map.addControl(mapTypeControl);
        }
    });
	//是否显示热力图
    function openHeatmap(){
        heatmapOverlay.show();
    }
	function closeHeatmap(){
        heatmapOverlay.hide();
    }
    function setGradient(){
     	var gradient = {};
     	var colors = document.querySelectorAll("input[type='color']");
     	colors = [].slice.call(colors,0);
     	colors.forEach(function(ele){
			gradient[ele.getAttribute("data-key")] = ele.value; 
     	});
        heatmapOverlay.setOptions({"gradient":gradient});
    }
	//判断浏览区是否支持canvas
    function isSupportCanvas(){
        var elem = document.createElement('canvas');
        return !!(elem.getContext && elem.getContext('2d'));
    }

    function addPtCilckHandle(infowin, marker) {
        marker.addEventListener("click", function (e) {
            var p = e.target;
            var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
            map.openInfoWindow(infowin, point); //开启信息窗口

            var bounds = map.getBounds();
            var ptSW = bounds.getSouthWest();
            var ptNE = bounds.getNorthEast();

            var length = (ptNE.lat - ptSW.lat)/6;
            point.lat = point.lat + length;

            map.panTo(point);
        }.bind(this));
    }

    //地图窗口类
    var MapInfoWindowFactory = function () {
    };

    MapInfoWindowFactory.init = function (height, width, title) {
        this.opts = {
            width : width,     // 信息窗口宽度
            height: height,     // 信息窗口高度
            title : title , // 信息窗口标题
            enableMessage:true,//设置允许信息窗发送短息
            message:""
        };
    };

    MapInfoWindowFactory.createPtWin = function (mess) {

        var infowin = new BMap.InfoWindow(mess, this.opts);
        infowin.disableAutoPan();
        return infowin;
    };
</script>